<template>
    <ui-main title="表单验证">
        <div class="item one">
            <el-form ref="form" :model="form" label-width="80px" style="width:500px;">
                <el-form-item label="活动名称" prop="name" :rules="[required,{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" prop="region" :rules="{required:true}">
                    <ui-select :option="selectOpt" :model-id.sync="form.region"></ui-select>
                </el-form-item>
                <el-form-item label="活动时间" prop="date1" :rules="{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }">
                    <el-date-picker v-model="form.date1" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="活动性质"
                    prop="type"
                    :rules="{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <br>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源" prop="resource" :rules="{ required: true, message: '请选择活动资源', trigger: 'change' }">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone" :rules="{ required: true, pattern: /^1[34578]\d{9}$/ }">
                    <el-input type="number" v-model="form.phone" placeholder="请输入11位手机号码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">提交表单</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="item one">
            <ui-load-md file="validator"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    type: [],
                    resource: '',
                    phone: ''
                },
                //把常用参数建立一个变量,方便上面html直接调用,不用重复写长段代码
                required: {required: true, message: '必填'},

                //选项不要直接写在html中，那样会导致选择时不刷新校验，而点提交按钮时才刷新。
                selectOpt:[{label:'上海',id:'shanghai'},{label:'北京',id:'beijing'}] 
            }
        },
        methods: {
            submitForm(formName) {
                console.log(this.$refs[formName].validate)
                this.$refs[formName].validate((valid) => {
                    console.log(valid)
                    if (valid) {
                        this.$message('验证通过')
                    }
                })
            },
            resetForm(formName) {
                // 重置表单到最初状态,而非简单的清空表单!
                this.$refs[formName].resetFields()
            }
        }
    }
</script>
